<template>
    <div>
      App.vue
      <!--以.vue结尾的文件 都称为组件-->
      <!--vue文件的结构 划分成是三个部分-->
      <!--template 模板 写html元素 页面元素-->
      <div>======Demo组件======</div>
      <Demo/>
      <div>======Demo1组件======</div>
      <Demo1/>
      <div>======Demo2组件======</div>
      <Demo2/>
      <div>======Demo4组件======</div>
      <Demo4/>
      <div>======Demo5组件======</div>
      <Demo5/>
      <div>======Demo6组件======</div>
      <Demo6 v-if="flag"/>
      <button @click="flag = !flag">改变flag</button>
      <Demo6/>
     <div>======Demo7组件======</div>
     <Demo7 v-if="flag"/>
      <Demo7/>
    </div>
  </template>
  
  <script setup>
  //处理页面行为
  //引入dem01组件
  import Demo from '@/views/demo.vue'
  import Demo1 from '@/views/demo1.vue'
  import Demo2 from '@/views/demo2.vue'
  import Demo4 from '@/views/demo4.vue'
  import Demo5 from '@/views/demo5.vue'
  import Demo6 from '@/views/demo6.vue'
  import Demo7 from '@/views/demo7.vue'
  </script>
  
  <style scoped>
  /*页面样式*/ 
  /*div{
    color:blue;
  }*/
  </style>